<template>
<div>
    <el-card class="box-card">
    <!-- 面包屑导航 -->
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>仓库管理</el-breadcrumb-item>
        <el-breadcrumb-item active>仓库详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
          <!-- 搜索 -->
      <div class="search_box">
        <div class="search">
          <el-select
            v-model="search.right"
            placeholder="请选择仓库"
            style="margin-right: 10px"
          >
            <el-option
              v-for="item in datastorelist"
              :key="item.store_id"
              :label="item.store_name"
              :value="item.store_id"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="search.left"
            placeholder="请选择商品"
            style="margin-right: 10px"
          >
            <el-option
              v-for="item in datagoodslist"
              :key="item.gid"
              :label="item.goods_name"
              :value="item.gid"
            >
            </el-option>
          </el-select>
          <!-- <el-input
            v-model="search.right"
            placeholder="请输入联系人"
          ></el-input> -->
          <el-button plain @click="searchclick">搜索</el-button>
          <el-button type="warning" plain @click="clearinput">重置</el-button>
        </div>
      </div>
    <el-table
      :data="datalist"
      height="500"
      row-key="select_id"
      border
      style="width: 100%; margin-top: 30px; height: 100%"
    >
      <el-table-column prop="select_id" label="编号" width="100">
      </el-table-column>
      <el-table-column prop="store[0].store_name" label="仓库名称" >
      </el-table-column>
      <el-table-column prop="store[0].store_address" label="仓库地址">
      </el-table-column>
      <el-table-column prop="goods[0].goods_name" label="商品名称">
      </el-table-column>
      <el-table-column prop="goods[0].goods_rmb" label="价格">
      </el-table-column>
      <el-table-column prop="number" label="货物存量"> </el-table-column>
      <el-table-column prop="goods[0].goods_specs" label="规格">
      </el-table-column>
      <el-table-column prop="goods[0].remark" label="备注">
      </el-table-column>
      </el-table-column>
      <el-table-column prop="stock_up" label="预警上限">
      </el-table-column>
      </el-table-column>
      <el-table-column prop="stock_down" label="预警下限">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="warning"
              @click="editDialog(scope.row)"
              icon="el-icon-edit"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
      <!-- 修改按钮 -->
    <el-dialog
      title="修改供应商"
      :visible.sync="editDialogVisible"
      width="30%"
      center
      :before-close="clearDialog"
    >
      <el-form :model="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品预警上限" prop="pass">
          <el-input v-model="form.stock_up" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品预警下限" prop="pass">
          <el-input v-model="form.stock_down" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clearDialog">取 消</el-button>
        <el-button type="primary" @click="editstockclick">确 定</el-button>
      </span>
    </el-dialog>
</div>

</template>

<script>
import { editstock, searchstock } from "../../http/api";
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      // datalist: [],
      //   添加提示框
      editDialogVisible: false,
      //仓库
      store: "",
      //选择商品列表
      goodslist: [],
      form: {
        select_id: "",
        stock_up: "",
        stock_down: "",
      },
      search: {
        left: "",
        right: "",
      },
    };
  },
  created() {
    this.getstocklist();
    this.getstorelist();
    this.getgoodslist();
  },
  methods: {
    ...mapActions({
      getstocklist: "stock/getstocklistActions",
      getstorelist: "store/getstorelistActions",
      getgoodslist: "goods/getgoodslistActions",
    }),
    // 打开修改对话框
    editDialog(data) {
      this.editDialogVisible = true;
      this.form = {
        select_id: data.select_id,
        stock_up: data.stock_up,
        stock_down: data.stock_down,
      };
    },
    editstockclick() {
      let that = this;
      editstock(this.form).then((res) => {
        if (res.status == 201) {
          //   that.datalist = res.data;
          that.$message.success(res.message);
          that.getstocklist();
        } else {
          that.$message.error(res.message);
        }
      });

      this.clearDialog();
    },
    //清空数据
    clearDialog() {
      this.editDialogVisible = false;
      this.form = {
        select_id: "",
        stock_up: "",
        stock_down: "",
      };
    },
    //搜索商品
    searchclick() {
      let that = this;
      searchstock(this.search).then((res) => {
        if (res.status == 201) {
          console.log(res);
          //   that.datalist = res.data;
          that.$message.success(res.message);
          that.$store.commit("stock/changestocklist", res.data);
        } else {
          console.log(res);
          that.$message.error(res.message);
        }
      });
    },
    //重置清空
    clearinput() {
      this.search = {
        left: "",
        right: "",
      };
      this.getstocklist();
    },
  },
  computed: {
    ...mapGetters({
      datalist: "stock/datalist",
      datastorelist: "store/datalist",
      datagoodslist: "goods/datalist",
    }),
  },
};
</script>

<style lang="less" scoped>
.el-form {
  width: 40%;
  // margin: 0 auto;
}
.search {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .el-input {
    width: 50%;
    margin-right: 10px;
  }
  margin-bottom: 10px;
}
.search_box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
}
</style>